<!--
 * @Author: hupaocai 13767071930@163.com
 * @Date: 2025-03-27 02:21:46
 * @LastEditors: hupaocai 13767071930@163.com
 * @LastEditTime: 2025-03-29 11:16:43
 * @FilePath: /banban/pages/setting/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="page-setting" :style="`padding-top: ${statusBarHeight}px`">
        <view class="top-header">
            <view class="cancel" @tap="navBack">取消</view>
            <view class="title">设置</view>
            <view style="opacity: 0">取消</view>
        </view>

        <view class="set-list">
            <view class="set-list-li" v-for="setItem in setList" :key="setItem.id" @click="handleClick(setItem)">
                <view>{{ setItem.title }}</view>
            </view>
        </view>

        <view class="primary-button" @click="handleLogout">退出登录</view>
    </view>
</template>
<script setup>
import { logout } from '@/api/user'
import { ref, computed, reactive } from 'vue';
import store from '@/store/index.js';
import { toast } from '@/utils/common'
const statusBarHeight = computed(() => store.state.systemInfo.statusBarHeight)

const setList = reactive([
    {
        id: 0,
        title: '基础信息',
        url: '/pages/setting/userInfo?type=edit'
    },
    
    {
        id: 2,
        title: '绑定设备',
        url: '/pages/bindDevice/index'
    },
    {
        id: 3,
        title: '隐私协议',
        url: '/pages/about/privacyAgreement'
    },
    {
        id: 4,
        title: '用户协议',
        url: '/pages/about/userAgreement'
    },
    {
        id: 1,
        title: '接送推送通知',
        url: '/pages/about/message'
    },
    {
        id: 5,
        title: '版本 1.0.0',
        url: '/pages/home/chat'
    }
])

const handleClick = (item) => {
    if (item.url) {
        uni.navigateTo({
            url: item.url
        });
    }
}

// 返回上一页
const navBack = () => {
    uni.navigateBack();
};

const handleLogout = async () => {
    uni.showModal({
	title: '提示',
	content: '是否退出登录？',
	success: async (res) => {
        console.log(res, 'res')
		if (res.confirm) {
            try {
                const { code, msg } = await logout()

                if (code === 0) {
                    toast({ title: '退出成功', icon: 'success' }, () => {
                        uni.reLaunch({
                            url: '/pages/login/index'
                        });
                    });
                    return
                }
                toast({ title: msg, icon: 'none' })
            } catch (e) {}
   
		} else {
			console.log('取消');
		}
	}
});
}

</script>
<style lang="scss">
.page-setting {

    .top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px 10px;
        border-bottom: 1px solid #e4e4e499;
        box-sizing: border-box;
        margin-bottom: 15px;
        .cancel {
            font-size: 15px;
            font-weight: 300;
            letter-spacing: 0px;
            line-height: 20px;
            color: rgba(153, 153, 153, 1);
            text-align: left;
            vertical-align: top;
        }

        .title {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 0px;
            line-height: 22px;
            color: rgba(21, 21, 34, 1);
            text-align: center;
            vertical-align: top;
        }
    }

    .set-list {
        .set-list-li {
            padding: 17px 18px 20px 29px ;
            border-bottom: 1px solid #e4e4e499;
            font-size: 15px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 20px;
            color: rgba(21, 21, 34, 1);
            text-align: left;
            vertical-align: top;
        }
    }

    .primary-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100vw - 50px);
        height: 48px;
        margin: 40px auto;
        opacity: 1;
        border-radius: 8.02px;
        background: #5d5fef;
        box-shadow: 0px 0px 0px 6.42px rgba(255, 255, 255, 0.15);

        font-size: 18px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 21.1px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }
    
}
</style>